<template>
  <div>
    <!-- 添加积分规则表单 -->
    <el-card shadow="hover" style="margin-bottom: 20px;">
      <h3>添加积分规则</h3>
      <el-form :model="addForm" label-width="120px" @submit.prevent="addRule">
        <el-form-item label="规则代码">
          <el-input v-model="addForm.code" placeholder="请输入规则代码"></el-input>
        </el-form-item>
        <el-form-item label="规则名称">
          <el-input v-model="addForm.name" placeholder="请输入规则名称"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input-number v-model="addForm.points" :min="0" placeholder="请输入积分"></el-input-number>
        </el-form-item>
        <el-form-item label="每日限制">
          <el-input-number v-model="addForm.dailyLimit" :min="0" placeholder="请输入每日限制"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 积分规则列表 -->
    <el-table :data="rules" border stripe style="width: 100%;" @sort-change="handleSortChange">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="code" label="规则代码" width="150"></el-table-column>
      <el-table-column prop="ruleName" label="规则名称" width="150"></el-table-column>
      <el-table-column prop="points" label="积分" sortable="custom" width="120"></el-table-column>
      <el-table-column prop="dailyLimit" label="每日限制" sortable="custom" width="120"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          {{ formatStatus(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" @click="editRule(scope.row)">编辑</el-button>
          <el-button size="small" :type="scope.row.status === 0 ? 'danger' : 'success'" @click="toggleStatus(scope.row)">
            {{ scope.row.status === 0 ? '禁用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑积分规则对话框 -->
    <el-dialog title="编辑积分规则" v-model="dialogVisible" width="30%">
      <el-form :model="editForm" label-width="120px">
        <el-form-item label="规则代码">
          <el-input v-model="editForm.code" disabled></el-input>
        </el-form-item>
        <el-form-item label="规则名称">
          <el-input v-model="editForm.ruleName" placeholder="请输入规则名称"></el-input>
        </el-form-item>
        <el-form-item label="积分">
          <el-input-number v-model="editForm.points" :min="0" placeholder="请输入积分"></el-input-number>
        </el-form-item>
        <el-form-item label="每日限制">
          <el-input-number v-model="editForm.dailyLimit" :min="0" placeholder="请输入每日限制"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateRule">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request.js'; // 确保这是你的axios封装

const rules = ref([]);
const addForm = ref({
  code: '',
  name: '',
  points: 0,
  dailyLimit: 0
});
const editForm = ref({
  id: 0,
  code: '',
  ruleName: '',
  points: 0,
  dailyLimit: 0
});
const dialogVisible = ref(false);

// 加载所有积分规则
const loadRules = async () => {
  try {
    const res = await request.get('/point/rule/all');
    if (res.code === '200') {
      rules.value = res.data;
    }
  } catch (error) {
    console.error('Failed to load rules:', error);
  }
};

// 添加积分规则
const addRule = async () => {
  try {
    const res = await request.post('/point/rule/add', {
      code: addForm.value.code,
      name: addForm.value.name,
      points: addForm.value.points,
      dailyLimit: addForm.value.dailyLimit
    });
    if (res.code === '200') {
      loadRules();
      addForm.value = {
        code: '',
        name: '',
        points: 0,
        dailyLimit: 0
      };
    }
  } catch (error) {
    console.error('Failed to add rule:', error);
  }
};

// 修改积分规则
const editRule = (row) => {
  editForm.value = {
    id: row.id,
    code: row.code,
    ruleName: row.ruleName,
    points: row.points,
    dailyLimit: row.dailyLimit
  };
  dialogVisible.value = true;
};

const updateRule = async () => {
  try {
    const res = await request.put(`/point/rule/update`, {
      id: editForm.value.id,
      code: editForm.value.code,
      name: editForm.value.ruleName,
      points: editForm.value.points,
      dailyLimit: editForm.value.dailyLimit
    });
    if (res.code === '200') {
      loadRules();
      dialogVisible.value = false;
    }
  } catch (error) {
    console.error('Failed to update rule:', error);
  }
};

// 切换规则状态
const toggleStatus = async (row) => {
  try {
    const res = await request.put(`/point/rule/changeStatus/${row.id}`);
    if (res.code === '200') {
      loadRules();
    }
  } catch (error) {
    console.error('Failed to change status:', error);
  }
};

// 处理排序变化
const handleSortChange = ({column, prop, order}) => {
  // 根据需要处理排序逻辑
  console.log(`Sorting by ${prop} in ${order} order`);
};

// 格式化状态
const formatStatus = (status) => {
  switch (status) {
    case 0:
      return '启用';
    case 1:
      return '禁用';
    default:
      return '未知';
  }
};

// 初始化加载积分规则
onMounted(() => {
  console.log('Component mounted, loading rules...');
  loadRules();
});
</script>

<style scoped>
.el-form-item {
  margin-bottom: 15px;
}

.el-form-item:last-child {
  margin-bottom: 0;
}

.el-dialog .el-form-item {
  margin-bottom: 20px;
}
</style>
